// Ordinarily, you'd generate this data from markdown files in your
// repo, or fetch them from a database of some kind. But in order to
// avoid unnecessary dependencies in the starter template, and in the
// service of obviousness, we're just going to leave it here.

export interface IArticle {
	title: string;
	slug: string;
	publishTime: string;
	viewCount: number;
	module: string;
	html: string;
}
// This file is called `_posts.js` rather than `posts.js`, because
// we don't want to create an `/blog/posts` route — the leading
// underscore tells Sapper not to do that.

const posts: IArticle[] = [
	{
		title: 'What is SvelteKit?',
		slug: 'what-is-svelteKit',
		viewCount: 12,
		publishTime: '2022-12-31 09:23',
		module: 'svelte',
		html: `
		<p>SvelteKit is a framework for building extremely high-performance web apps. You're looking at one right now! There are two basic concepts:</p>
		<ul>
		<li>Each page of your app is a <a href="https://svelte.dev" target="_blank" rel="noopener noreferrer">Svelte</a> component</li>
		<li>You create pages by adding files to the <code>src/routes</code> directory of your project. These will be server-rendered so that a user's first visit to your app is as fast as possible, then a client-side app takes over</li>
		</ul>
		<p>Building an app with all the modern best practices — code-splitting, offline support, server-rendered views with client-side hydration — is fiendishly complicated. SvelteKit does all the boring stuff for you so that you can get on with the creative part.</p>
		<p>You don't need to know Svelte to understand the rest of this guide, but it will help. In short, it's a UI framework that compiles your components to highly optimized vanilla JavaScript. Read the <a href="https://svelte.dev/blog/svelte-3-rethinking-reactivity" target="_blank" rel="noopener noreferrer">introductory blog post</a> and the <a href="https://svelte.dev/tutorial" target="_blank" rel="noopener noreferrer">tutorial</a> to learn more.</p>
		`
	},

	{
		title: 'How to use SvelteKit',
		slug: 'how-to-use-sveltekit',
		viewCount: 13,
		publishTime: '2022-12-31 09:23',
		module: 'react',
		html: `
		<p>The easiest way to start building a SvelteKit app is to run <code>npm init</code>:</p>
		<div class="code-block"><pre class="language-bash"><code><span class="token function">npm</span> init svelte@next my-app
		<span class="token builtin class-name">cd</span> my-app
		<span class="token function">npm</span> <span class="token function">install</span>
		<span class="token function">npm</span> run dev</code></pre></div>
		<p>This will scaffold a new project in the <code>my-app</code> directory, install its dependencies, and start a server on <a href="http://localhost:3000" target="_blank" rel="noopener noreferrer">localhost:3000</a>. Try editing the files to get a feel for how everything works – you may not need to bother reading the rest of this guide!</p>
		`
	},

	{
		title: 'Why the name?',
		slug: 'why-the-name',
		viewCount: 15,
		publishTime: '2022-12-31 09:23',
		module: 'vue',
		html: `
			<p>In war, the soldiers who build bridges, repair roads, clear minefields and conduct demolitions — all under combat conditions — are known as <em>sappers</em>.</p>

			<p>For web developers, the stakes are generally lower than those for combat engineers. But we face our own hostile environment: underpowered devices, poor network connections, and the complexity inherent in front-end engineering. Sapper, which is short for <strong>S</strong>velte <strong>app</strong> mak<strong>er</strong>, is your courageous and dutiful ally.</p>
		`
	},

	{
		title: 'How is Sapper different from Next.js?',
		slug: 'how-is-sapper-different-from-next',
		viewCount: 16,
		publishTime: '2022-12-31 09:23',
		module: 'jquery',
		html: `
			<p><a href='https://github.com/zeit/next.js'>Next.js</a> is a React framework from <a href='https://vercel.com/'>Vercel</a>, and is the inspiration for Sapper. There are a few notable differences, however:</p>

			<ul>
				<li>It's powered by <a href='https://svelte.dev'>Svelte</a> instead of React, so it's faster and your apps are smaller</li>
				<li>Instead of route masking, we encode route parameters in filenames. For example, the page you're looking at right now is <code>src/routes/blog/[slug].svelte</code></li>
				<li>As well as pages (Svelte components, which render on server or client), you can create <em>server routes</em> in your <code>routes</code> directory. These are just <code>.js</code> files that export functions corresponding to HTTP methods, and receive Express <code>request</code> and <code>response</code> objects as arguments. This makes it very easy to, for example, add a JSON API such as the one <a href='blog/how-is-sapper-different-from-next.json'>powering this very page</a></li>
				<li>Links are just <code>&lt;a&gt;</code> elements, rather than framework-specific <code>&lt;Link&gt;</code> components. That means, for example, that <a href='blog/how-can-i-get-involved'>this link right here</a>, despite being inside a blob of HTML, works with the router as you'd expect.</li>
			</ul>
		`
	},

	{
		title: 'How can I get involved?',
		slug: 'how-can-i-get-involved',
		viewCount: 19,
		publishTime: '2022-12-31 09:23',
		module: 'svelte',
		html: `
			<p>We're so glad you asked! Come on over to the <a href='https://github.com/sveltejs/svelte'>Svelte</a> and <a href='https://github.com/sveltejs/sapper'>Sapper</a> repos, and join us in the <a href='https://svelte.dev/chat'>Discord chatroom</a>. Everyone is welcome, especially you!</p>
		`
	}
];

posts.forEach((post) => {
	post.html = post.html.replace(/^\t{3}/gm, '');
});

export default posts;
